<template>
    <div>
        <canvas
                id="canvas"
        />

    </div>
</template>

<script>
    // import * as d3 from 'd3';

    let canvas;
    let context;
    export default {
        name: 'Video',
        data() {
            return {
            }
        },
        computed: {

        },
        watch: {

        },
        mounted() {
            this.initCanvas()
        },
        methods: {
            async initCanvas() { // 初始化
                const dataSource = 'https://s5.ssl.qhres.com/static/b0695e2dd30daa64.json';
                const data = await (await fetch(dataSource)).json();
                console.log('data:', data)

                // const regions = d3.hierarchy(data)
                //     .sum(d => 1)
                //     .sort((a, b) => b.value - a.value);
                // console.log('regions:', regions)
                //
                // const pack = d3.pack()
                //     .size([1600, 1600])
                //     .padding(3);
                // console.log('pack:', pack)
                //
                // const root = pack(regions);
                // console.log('root:', root)
                //
                // canvas = document.querySelector('canvas');
                // context = canvas.getContext('2d');
                // canvas.width = window.innerWidth
                // canvas.height = window.innerHeight
                //
                // this.draw(context, root);
                // context.stroke();
                // // console.log("初始化canvas")
                // // canvas = document.getElementById('canvas');
                // // ctx = canvas.getContext('2d');
                //
                // // this.drawSmile()
            },
            draw(ctx, node, {fillStyle = 'rgba(0, 0, 0, 0.2)', textColor = 'white'} = {}) {
                // console.log('ctx:', ctx)
                // console.log('node:', node)
                const children = node.children;
                const {x, y, r} = node;
                const TAU = 2 * Math.PI;
                ctx.fillStyle = fillStyle;
                ctx.beginPath();
                ctx.arc(x, y, r, 0, TAU);
                ctx.fill();
                if(children) {
                    for(let i = 0; i < children.length; i++) {
                        this.draw(context, children[i]);
                    }
                } else {
                    const name = node.data.name;
                    ctx.fillStyle = textColor;
                    ctx.font = '1.5rem Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText(name, x, y);
                }
            },
            drawSmile() {
                // ctx.beginPath();
                // ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
                // ctx.moveTo(110, 75);
                // ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
                // ctx.moveTo(65, 65);
                // ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
                // ctx.moveTo(95, 65);
                // ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
                // ctx.stroke();


                const rectSize = [500, 500];
                ctx.save(); // 暂存状态
                // 平移
                ctx.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
                ctx.fillStyle = 'red';
                ctx.beginPath();
                ctx.rect(0.5 * canvas.width, 0.5 * canvas.height, ...rectSize);
                ctx.fill();

                ctx.restore(); // 恢复状态

                ctx.stroke();
            }
        }
    }
</script>

<style scoped>

</style>
